<template>
    <section>
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            :before-close="handleClose"
            width="700px"
        >
            <section>
                <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
                    <el-form-item label="id" prop="id">
                        <el-input v-model="formData.id"></el-input>
                    </el-form-item>
                    <el-form-item label="模板名称" prop="templateName">
                        <el-input v-model="formData.templateName"></el-input>
                    </el-form-item>
                    <el-form-item label="templateIndex" prop="templateIndex">
                        <el-input
                            v-model="formData.templateIndex"
                            placeholder="模板ID,一般对应sms的平台的id,钉钉的token 等。"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="所属租户" prop="templatePlatform">
                        <el-input v-model="formData.templatePlatform"></el-input>
                    </el-form-item>
                    <el-form-item label="消息标题" prop="title">
                        <el-input v-model="formData.title"></el-input>
                    </el-form-item>
                    <el-form-item label="消息内容" prop="content">
                        <el-input v-model="formData.content"></el-input>
                    </el-form-item>
                    <el-form-item label="消息类型" prop="msgTypeCode">
                        <el-select v-model="formData.msgTypeCode">
                            <el-option
                                v-for="item in msgTypeCodeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        /></el-select>
                    </el-form-item>
                    <el-form-item label="messageUrl" prop="messageUrl">
                        <el-input v-model="formData.messageUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="picUrl" prop="picUrl">
                        <el-input v-model="formData.picUrl"></el-input>
                    </el-form-item>
                </el-form>
            </section>
            <span slot="footer" class="dialog-footer flex justify-center items-center">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSave(formRef)">确 定</el-button>
            </span>
        </el-dialog>
    </section>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from 'element-plus';
import { defineExpose, reactive, ref } from 'vue';

import { createTemplate, editTemplate, getTemplateDetail } from '@/api/template';
const formData = reactive({
    id: '',
    title: '',
    content: '',
    msgTypeCode: '',
    templateIndex: '',
    templateName: '',
    templatePlatform: '',
    picUrl: '',
    messageUrl: '',
});
const rules = reactive<FormRules>({
    templateName: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
    templatePlatform: [{ required: true, message: '所属租户不能为空', trigger: 'blur' }],
    msgTypeCode: [{ required: true, message: '消息类型不能为空', trigger: 'blur' }],
});
const dialogType = ref(undefined);
const formRef = ref<FormInstance>();
const dialogVisible = ref(false);
const dialogTitle = ref('模版管理');
const msgTypeCodeOptions = [
    {
        value: 0,
        label: '短信',
    },
    {
        value: 1,
        label: '钉钉链接消息',
    },
    {
        value: 2,
        label: '钉钉富文本消息',
    },
    {
        value: 3,
        label: '钉钉文本消息',
    },
    {
        value: 4,
        label: '邮件文本',
    },
    {
        value: 5,
        label: '邮件HTMl',
    },
    {
        value: 6,
        label: '站内消息',
    },
];
const emits = defineEmits(['submit']);
const handleClose = () => {
    dialogVisible.value = false;
};
// 获取详情
const handleDetail = async (id) => {
    getTemplateDetail(id)
        .then((res) => {
            Object.assign(formData, res);
        })
        .catch((res) => {
            ElMessage.warning(res.msg);
        });
};
const handleSave = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid) => {
        if (valid) {
            if (dialogType.value === 'add') {
                createTemplate(formData)
                    .then((response) => {
                        if (response) {
                            ElMessage.success('添加成功');
                            handleClose();
                            emits('submit');
                        }
                    })
                    .catch((response) => {
                        ElMessage.warning(response.msg);
                    });
            } else if (dialogType.value === 'edit') {
                editTemplate(formData)
                    .then((response) => {
                        if (response) {
                            ElMessage.success('修改成功');
                            handleClose();
                            emits('submit');
                        }
                    })
                    .catch((response) => {
                        ElMessage.warning(response.msg);
                    });
            }
        }
    });
};

const open = (id, type, title) => {
    resetForm(formRef.value);
    dialogTitle.value = title;
    dialogType.value = type;
    dialogVisible.value = true;
    if (id) {
        // 获取详情
        handleDetail(id);
    }
};

const close = () => {
    handleClose();
};
//清除校验效果并且清空表单参数的函数
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

defineExpose({
    open,
    close,
});
</script>
